<template>
    <div style="height:320px;">
      <!-- 显示名字列表 -->
      <div style="margin-bottom: 10px;position: relative;height:215px;overflow: auto;" class="hide-scrollbar">
        <div
          v-for="(name, index) in names"
          :key="index"
          :style="{
            cursor: 'pointer',
            color: selectedName === name ? '#409EFF' : 'black',
            marginBottom: '10px',
            backgroundColor: selectedName === name ? 'rgb(216.8, 235.6, 255)':'#f3f4f8',
          }"
          class="file"
          @click="handleNameClick(name)"
        >
            <img src="@/assets/收藏.png" style="width:15px;position: relative;top:5px;left: 10px;;"/>
            <h6 style="position: relative;font-size: 13px; top:-19px;left:30px;font-weight: 500; max-width:230px;white-space: nowrap;overflow: hidden;">{{ name }}</h6>
        </div>
      </div>
  
      <!-- 新建文件 -->
      <div style="margin-bottom: 20px;">
        <el-input v-model="newName" placeholder="新建收藏文件" style="width: 170px; margin-right: 10px;" />
        <el-button type="primary" @click="handleCreateFile">新建文件</el-button>
      </div>
  
      <!-- 显示选中名字 -->
      <div v-if="selectedName" style="position:absolute;bottom: 45px;">
        收藏至文件: <strong>{{ selectedName }}</strong>
      </div>
  
      <!-- 关闭弹出框的按钮 -->
      <div style="text-align: right; margin-top: 20px;position: absolute;right:15px;">
        <el-button @click="confirmCollection">确认收藏</el-button>
      </div>

      <!-- 关闭弹出框的按钮 -->
      <div style="text-align: right; margin-top: 20px;position: absolute;right:110px;">
        <el-button @click="closeDialog">取消收藏</el-button>
      </div>
    </div>
  </template>
  
  <script lang="ts" setup>
  import { ref,onMounted } from 'vue';
  import { ElMessage, valueEquals } from 'element-plus';
  
  // 模拟从后端获取的名字列表
  const names = ref([])
  
  // 当前选中的名字
  const selectedName = ref('');
  
  // 新名字输入框的值
  const newName = ref('收藏夹');
  
  // 处理名字点击
  const handleNameClick = (name: string) => {
    selectedName.value = name;
  };
  
  // 处理新建文件
  const handleCreateFile = () => {
//名字为空
  if (!newName.value.trim()) {
    ElMessage({
      type: 'error',
      message: '文件名不能为空',
    });
    return;
  }

  // 检查是否已经存在同名的文件夹
  if (names.value.includes(newName.value)) {
    ElMessage({
      type: 'warning',
      message: `此名为 "${newName.value}" 的文件已存在.`,
    });
    return;
  }
  axios({
    url:"https://m1.apifoxmock.com/m1/5997017-0-default/addCollectionFile",
    method:'POST',
    data:{
      userId:localStorage.getItem('userId'),
      fileName:newName.value,
    }
  }).then((response)=>{
    if(response.data.code===1){
      console.log("新建收藏夹成功")
      getList();
    }else{
      //获取失败后的行为
      console.log("获取失败")
    }
  }).catch(error => {
      alert("出现" + error + "错误，请重新操作")
    })
  // 将新名字添加到列表
  names.value.push(newName.value);
  ElMessage({
    type: 'success',
    message: `成功创建新习题文件: ${newName.value}`,
  });
  newName.value = ''; // 清空输入框
};
  
  // 关闭弹出框
  const emit = defineEmits(['close-dialog']);
  const closeDialog = () => {
    emit('close-dialog');
  };


import axios from 'axios'
import { data } from 'vis-network';
//获取收藏夹列表
function getList(){
    axios({
    url:"https://m1.apifoxmock.com/m1/5997017-0-default/getmenu",
    method:'GET',
    data:{
      userId:localStorage.getItem('userId'),
    }
  }).then((response)=>{
    if(response.data.code===1){
      console.log("收藏夹目录为"+response.data.data)
      names.value=response.data.data.menu
    }else{
      //获取失败后的行为
      console.log("获取失败")
    }
  }).catch(error => {
      alert("出现" + error + "错误，请重新操作")
    })
}
onMounted(()=>{
    getList();
})
import { useCounterStore } from '@/stores/counter';
const Store = useCounterStore();
function confirmCollection(){
    axios({
    url:"https://m1.apifoxmock.com/m1/5997017-0-default/CommitionQuestion",
    method:'POST',
    data:{
        question:Store.$state.Question.Confirm,
        userId:localStorage.getItem('userId'),
        file:selectedName.value,
    }
  }).then((response)=>{
    if(response.data.code===1){
        ElMessage({
        type: 'success',
        message: `收藏成功`,
    });
    Store.clearConfirmQuestion();
    emit('close-dialog');
    }else{
      //获取失败后的行为
      console.log("获取失败")
    }
  }).catch(error => {
      alert("出现" + error + "错误，请重新操作")
    })
}
</script>
<style scoped>
.file{
    /* background-color: #f3f4f8; */
    background-color: hsl(210, 100%, 93%);
    height:30px;
    margin: 0px;
    border-radius: 5px;
}
/* 隐藏滚动条（适用于 WebKit 内核浏览器） */
.hide-scrollbar::-webkit-scrollbar {
    width: 0; /* 隐藏横向滚动条 */
    height: 0; /* 隐藏纵向滚动条 */
  }

  /* 隐藏滚动条（适用于 Firefox） */
  .hide-scrollbar {
    scrollbar-width: none;
  }
</style>